<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

<script setup>
import { ref, reactive } from 'vue'
import { Filter } from '@element-plus/icons-vue'

const showFilterRow = ref(false)
const filter = reactive({
  GoodName: '',
  Batch: '',
  QGPeriod: '',
  PLNumber: '',
  Manufacturer: '',
  Information: '',
  CreateName: '',
  CreateDate: '',
  UpdateName: ''
})
const handleFilter = () => {
  ShowBasic()
}
</script>

<!-- 按钮部分 -->
<el-button class="filter-btn" circle @click="showFilterRow.value = !showFilterRow.value">
  <el-icon><Filter /></el-icon>
</el-button>

<el-table ...>
  <template #header>
    <tr>
      <!-- 表头 -->
    </tr>
    <tr v-if="showFilterRow">
      <!-- 查询行 -->
    </tr>
  </template>
  <!-- ... -->
</el-table>
